<template >
    <div class="box">
        <div class="content">
            <div class="help clear">
                <dl class="helpTab">
                    <!-- helps -->
                    <div v-for="(it,idx) in helps" :key="idx">
                        <dt id="zhinan">{{ it.category_name }}</dt>
                        <dd @click = "newsClick(t.news_id)" :class="{active:newsId == t.news_id}" v-for="(t,i) in it.data" :key="i" name="zclc">{{ t.title }}</dd>
                    </div>
                    

                    <!-- <dt id="fuwu">特色服务</dt>
                    <dd name="zxbzr">在线班主任</dd>
                    <dd name="cdsq">重读申请</dd>
                    <dd name="tksm">退款说明</dd>
                    <dt id="wenti">常见问题</dt>
                    <dd name="kcwt">课程问题</dd>
                    <dd name="zfwt">支付问题</dd>
                    <dd name="jswt">技术问题</dd> -->
                </dl>
                <div class="helpCon">
                    <!-- 右侧内容 -->
                    <div>
                        <h6>首页&gt;帮助中心&gt; {{ newsData.config?newsData.config.name+'&gt;':'' }} {{ newsData.title }}</h6>
                        <article>
                            <div v-html="newsData.content">

                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
export default {
    name: "help",
    mixins: [pagePublic],
    data() {
        return {
            helps: [],
            newsData:{},
            // urls:{
            //     list: {
            //         url:this.$api.tem.list,
            //         method:"get",
            //         sync:false,
            //     },
            //     add:this.$api.tem.add,
            //     edit:this.$api.tem.edit,
            //     del:this.$api.tem.del
            // },


        }
    },
    computed: {
        ...mapState(['configInfo']),

    },
    created() {
        this.getHelp()
    },
    methods: {
        ...mapMutations(['set_configInfo']),
        getHelp(){
            this.$api.getHelp().then(res=>{
                this.helps = res.data || [];
                if(res.data&&res.data.length>0){
                    if(res.data[0]&&res.data[0].data.length>0){
                        let newsId = this.$route.query.id;
                        if(newsId){
                            this.newsClick(newsId)
                        }else{
                            this.newsId = res.data[0].data[0].news_id
                            this.getNewsDetails()
                        }
                        
                    }
                }
            })
        },
        getNewsDetails(){
            this.$api.newsDetails({news_id:this.newsId}).then(res=>{
                this.newsData = res.data || {}
            })
        },
        newsClick(t){
            this.newsId = t
            this.getNewsDetails()
        }

    }
}
</script>
<style lang="scss" scoped>
/*帮助中心*/
.help {
    width: 1200px;
    margin: 30px auto 50px;
}

.helpTab {
    width: 226px;
    border: 1px solid #e5eaf0;
    border-right: 0;
    float: left;
    box-shadow: 0 0 10px #e6e6e6;
}

.helpTab dt,
.helpTab dd {
    height: 56px;
    line-height: 56px;
    border-bottom: 1px solid #fafafa;
    text-align: center;
}

.helpTab dt {
    font-size: 18px;
    color: #fff;
    background: var(--bg-color,'#FF6900');
    font-weight: bold;
}

.helpTab dd {
    background: #fff;
    font-size: 16px;
    color: #666;
    cursor: pointer;
}

.helpTab dd.active {
    background: #f5f5f5;
}

.helpCon {
    width: 936px;
    background: #fff;
    min-height: 868px;
    float: right;
    padding-bottom: 35px;
    box-shadow: 0 0 10px #e6e6e6;
}

.helpCon div {
    display: none;
}

.helpCon div:first-child {
    display: block;
}

.helpCon div h6 {
    width: 100%;
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    color: #4f565c;
    text-indent: 36px;
    border-bottom: 1px solid #e5eaf0;
}

.helpCon div article {
    padding: 30px 36px;
    width: 864px;
}

.helpCon div article h5 {
    font-size: 16px;
    margin-bottom: 20px;
}

.helpCon div article p {
    font-size: 14px;
    margin-bottom: 20px;
}

.helpCon div article p b {
    font-weight: bold;
}

.helpCon div article span {
    color: var(--bg-color,'#FF6900');
    margin-bottom: 20px;
    font-size: 14px;
    display: block;
}

.helpCon div article img {
    margin-bottom: 20px;
}

.helpCon div article table {
    width: 100%;
    text-align: center;
    border-right: 1px #F4F5F6 solid;
}

.helpCon div article table tr th {
    background: var(--bg-color,'#FF6900');
    height: 40px;
    line-height: 40px;
    color: #fff;
}

.helpCon div article table tr td {
    padding: 20px;
    border-left: 1px #F4F5F6 solid;
    border-bottom: 1px #F4F5F6 solid;
    vertical-align: middle;
}</style>